<template>
  <div class="body">
    <div class="conbox">
      <div class="logo">
        <img src="../assets/img/logo.png" alt />
        <div>后台管理平台</div>
      </div>
      <div class="smbox">
        <a-form ref="formRef" :model="loginUser" :rules="rules">
          <a-form-item ref="username" label="用户名" name="username">
            <a-input v-model:value="loginUser.username" required />
          </a-form-item>
          <a-form-item ref="password" label="密码" name="password">
            <a-input type="password" v-model:value="loginUser.password" />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="handleSubmit" :loading="btnloading"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user.js";
import { login } from "@/api/user.js";

const router = useRouter();
const userStore = useUserStore();
const formRef = ref();
const loginUser = ref({
  username: "",
  password: "",
});

const checkUsername = async (_rule, value) => {
  const reg = /^[a-zA-Z][a-zA-Z0-9]{4,19}$/;
  if (!value) {
    return Promise.reject("请输入用户名");
  } else if (reg.test(value)) {
    return Promise.resolve();
  } else {
    return Promise.reject(
      "用户名以字母开头，后面可以包含数字和字母，总长度在5至20位之间"
    );
  }
};
const rules = {
  username: [
    {
      required: true,
      message: "",
      trigger: "change",
    },
    {
      validator: checkUsername,
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
  ],
};
const btnloading = ref(false);

function handleSubmit() {
  btnloading.value = true;
  formRef.value
    .validate() // 表单校验
    .then(() => {
      // 提交表单
      login({
        username: loginUser.value.username,
        password: loginUser.value.password,
      })
        .then((data) => {
          console.log(data);
          if (data.code == 200) {
            userStore.user = data.data;
            // 将 token 存到 store
            let token = data.token;
            userStore.token = token;
            // 手动存
            // localStorage.setItem("token", token);
            // TODO() 获取权限并存到 store
            // 登录成功
            message.success("登录成功", 2).then(() => {
              router.push("/main");
            });
          } else {
            // 登录失败
            message.error(data.message, 5);
            btnloading.value = false;
          }
        })
        .catch((err) => {
          console.log(err);
          btnloading.value = false;
        });
    });
}
</script>

<style scoped>
.body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}

.conbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.logo {
  font-size: 30px;
  color: #000;
  width: 60vw;
  display: flex;
  align-items: center;
}
.logo img {
  height: 80px;
  margin-right: 20px;
}

.smbox {
  width: 60vw;
  height: 60vh;
  background-color: #fff;
  margin: 40px 0px;
  box-shadow: 0px 0px 10px #000;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%;
  position: relative;
}
.smbox label {
  color: #fff;
}
.a-form-itembox {
  position: absolute;
  top: 0px;
  right: 0px;
  box-sizing: border-box;
  padding: 60px 80px;
}
.title {
  font-size: 20px;
  color: #fff;
}

.inputbox {
  width: 300px;
  box-sizing: border-box;
}

.inputsmbox {
  width: 300px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}
.btn {
  width: 300px;
}
.foot {
  color: #fff;
}
.copyright-a {
  text-decoration: none;
  color: #fff;
}
.copyright-a:hover {
  color: #fff;
}
.toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
</style>
